<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Clean Blog</title>
    <!-- Bootstrap Core CSS -->
    <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Theme CSS -->
    <link href="../assets/css/clean-blog.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="../assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>Menu <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="index.html">Start Bootstrap</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="post.html">Sample Post</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('../assets/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <h1>Clean Blog</h1>
                    <hr class="small">
                    <span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div id='post'></div>
            <script type='text/html' id='tempPosts'>
                    {{ each data as value i }}
                    <div class="post-preview">
                        <a href="http://127.0.0.1:8888/postsss/{{value.id}}">
                            <h2 class="post-title">{{value.title}}</h2>
                            <h3 class="post-subtitle">{{value.excerpt}}</h3>
                        </a>
                        <p class="post-meta">Posted by <a href="#">{{value.user_id}}</a> on {{value.created}}</p>
                    </div>
                    <hr>
                {{ /each }}
            </script>
            <!-- Pager -->
            <ul class="pager">
                <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Newer</a></li>
                <li class="next"><a href="#">Older <span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </div>
    </div>
</div>
<hr>
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    <li>
                        <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                </span>
                        </a>
                    </li>
                </ul>
                <p class="copyright text-muted">Copyright &copy; Your Website 2016</p>
            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script src="../assets/vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- layer -->
<script src='../assets/vendor/layer/layer.js'></script>
<!-- template -->
<script src='../assets/vendor/template/template.js'></script>
<!-- Contact Form JavaScript -->
<script src="../assets/js/jqBootstrapValidation.js"></script>
<script src="../assets/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="../assets/js/clean-blog.js"></script>
<script>
    (function() {
        /* 页面参数 */
        var baseUrl = 'http://127.0.0.1:8888';
        // 第几页
        var pageindex = 1;
        // 每页多大大小
        var pagesize = 10;

        /* 公共方法 获取数据渲染页面 */
        var $post = $('#post'); // 获取帖子容器
        function renderPost() {
            $.getJSON( baseUrl + "/posts/getpage", { pageindex: pageindex, pagesize: pagesize }, function ( data ) {
                $post.html( template("tempPosts", { data: data } ) );
            })
        }

        /* 页面初始化 */
        renderPost();

        // 上一页功能
        $(".pager > .previous > a ").click(function () {
            if (pageindex <= 1) {
                layer.msg("往上就没了，别点啦");
                return false;
            }
            pageindex--;
            renderPost();
            return false;
        });

        // 下一页功能
        $(" .pager > .next > a ").click(function () {
            $.getJSON( baseUrl + "/posts/count", { pagesize: pagesize }, function ( data ) {
                //判断是否是最后一页
                if ( data.pagecount > pageindex) {
                    pageindex++;
                    renderPost();
                } else {
                    layer.msg( "到顶了大兄弟~" );
                }
            })
            return false;
        });
    })();
</script>
</body>
</html>
